<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>
   .a{
    width: 700px; 
    border: 1px solid red;
   }
   /* 1.关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}... } */
   @keyframes x{
       from{margin-left: 0px;}
       to{margin-left: 550px;}
   }
   /* 2.动画属性：animation{ 1 , 2 , 3 , 4 , 5 }
                1：动画帧
                2：执行时间
                3：过渡函数
                4：动画执行的延迟（可省略）
                5：动画执行的次数 */
    img{
        animation: x 3s linear 2;
    }

    .wai{
        width: 600px; 
        height: 100px; 
        border: 2px solid red;
    }
    .nei{
        width: 40px; 
        height: 80px; 
        margin: 5px; 
        background: red;
    }
    /* 3. infinite：无限次
          alternate：来回执行（交替，一去一回） */
    .nei{
        animation: x 3s linear infinite alternate;
    }
    @keyframes x{
        0%{margin-left: 0px;}
        25%{background: yellowgreen;}
        50%{background: goldenrod;}
        75%{background: palevioletred;}
        100%{
            background: coral;
            margin-left: 550px;
            }
    }
</style>

<body>
    <!-- 需求1：一个 元素从左向右移动，3秒内执行2次 -->
    <div class="a">
        <img src="img/cat.gif">
    </div>

    <!-- 需求2：一个 元素从左向右移动，3秒内执行完成。无限次交替执行 -->
    <div class="wai">
        <div class="nei"></div>
    </div>
</body>
</html>